import { PureComponent } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Select,
	Modal,
	DatePicker,
	Button
} from 'antd';
import html2pdf from 'html2pdf.js';
import printJS from 'print-js';
import styles from './ProUserList.less';
import memberApprove from '@/assets/member_approve.png';
import memberApprove2 from '@/assets/member_approve2.png';
import memberApprove3 from '@/assets/member_approve3.png';
import memberApprove4 from '@/assets/member_approve4.png';
import memberApprove5 from '@/assets/member_approve5.png';
import memberApprove6 from '@/assets/member_approve6.png';
import memberApprove7 from '@/assets/member_approve7.png';
const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

@Form.create()
class MemberApproveModal extends PureComponent {

	constructor(props) {
	    super(props);
	    this.state = {

	    }
	}

  exportPdf = () => {
  	// 要导出的dom节点，注意如果使用class控制样式，一定css规则
      const element = document.getElementById('doc');
      // 导出配置
      const opt = {
        margin: 1,
        filename: '警衔审批表_陈某_20200508134024',
        image: { type: 'jpeg', quality: 0.98 }, // 导出的图片质量和格式
        html2canvas: { scale: 2, useCORS: true }, // useCORS很重要，解决文档中图片跨域问题
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
      };
      if (element) {
        html2pdf().set(opt).from(element).save(); // 导出
      }
  };

  //打印
  print = () => {
    printJS({
      printable: 'print',
      type: 'html'
    });
  }


  render() {
  		const {
			modalVisibleByMemberApprove,
			form,
			handleModalVisibleByMemberApprove,
		} = this.props;
return (
    <Modal
width={900}
centered
destroyOnClose
title="审批表"
visible={modalVisibleByMemberApprove}
onCancel={() => handleModalVisibleByMemberApprove()}
footer={<Button onClick={() => handleModalVisibleByMemberApprove()}>取消</Button>}
>
<div style={{width: '100%',height: '520px',overflow: 'auto',textAlign: 'center',position: 'relative'}}>
  <Button type="primary" style={{marginRight: '10px',float: 'right'}} onClick={this.print}>
  打印
  </Button>
  <Button id="doc" type="primary" style={{marginRight: '10px',float: 'right'}} onClick={this.exportPdf}>
  导出
  </Button>
  <Button type="primary" style={{marginRight: '10px',float: 'right'}}>
      文件审核
  </Button>
  <span id="print">
      <img alt="" src={memberApprove} style={{width: '100%',marginTop: '10px'}}/>
      <img alt="" src={memberApprove2} style={{width: '100%'}}/>
      <img alt="" src={memberApprove3} style={{width: '100%'}}/>
      <img alt="" src={memberApprove4} style={{width: '100%'}}/>
      <img alt="" src={memberApprove5} style={{width: '100%'}}/>
      <img alt="" src={memberApprove6} style={{width: '100%'}}/>
      <img alt="" src={memberApprove7} style={{width: '100%'}}/>
  </span>
</div>
</Modal>
);
  }

}

export default MemberApproveModal;
